<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>留言后台管理系统</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		  integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
		  integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
	</script>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<style>
		div{
			display: block;
		}
		.w950{
			width: 950px;
			margin: 0 auto;

		}
		.anno-detail{
			padding: 20px 40px 60px 40px;
		}
		.anno-list{
			padding-bottom: 20px;
		}
		.comm-bd{
			border: 1px solid #e6e9ef;
			background-color: #fff;
		}
		#list-wrap h3{
			text-align: center;
		}
		.anno-list ul{
			padding: 20px 40px 10px 40px;
		}
		.anno-list li{
			line-height: 40px;
			height: 40px;
			overflow: hidden;
			font-size: 16px;
			border-bottom: 1px dotted #ddd;
			padding: 0 0 0 20px;
			position: relative;
			margin-bottom: 3px;
		}
		.anno-list .del{
			color: #3A3F4A;
			display: block;
			float: right;
		}
		.anno-list a:hover{
			color: #31b0d5;
		}
		.anno-list i{
			position: relative;
			top: 0;
			right: 20px;
			font-style: normal;
			color: #000000;
			text-align: right;
			font-size: 16px;
			margin-left: 40px;
			float: left;
		}
		#time{
			float: right;
		}
		.page{
			text-align: center;
			padding-top: 10px;
			height: 50px;
		}
		.page .active a{
			background: #31b0d5;
			color: #fff;
			border-color: #23527c;
			font-weight: 700;
		}
		.page .active a:hover{
			color: #fff;
		}
		.page a{
			line-height: 26px;
			display: inline-block;
			width: 26px;
			height: 26px;
			border: 1px solid #e3eaee;
			text-align: center;
			margin-left: 4px;
			text-decoration: none;
			font-size: 12px;
		}
		.page a:hover{
			color: #31b0d5;
			border: 1px solid #23527c;
		}
	</style>

</head>
<body>

<!--留言-->
<div class="w950">
	<div class="anno-detail anno-list comm-bd">
		<div id="list-wrap">
			<h3>留言板</h3>
			<ul>
				<li th:each="notes : ${notes}">
					<i th:text="${notes.noteId}"></i>
					<i th:text="${notes.noteName}"></i>
					<i th:text="${notes.noteMessage}"></i>
					<a class="del" th:href="@{/note/NoteDel(id=${notes.noteId})}">删除</a>
					<a class="del" th:href="@{/note/NoteEdit(id=${notes.noteId})}">修改</a>
					<i id="time" th:text="${#dates.format(notes.noteTime, 'yyyy-MM-dd HH:mm:ss')}"></i>
				</li>

			</ul>
		</div>
		<!-- 分页 -->
		<div class="page">
			<div>
				当前第 [[${pageInfo.pageNum}]] 页,共 [[${pageInfo.pages}]] 页.一共 [[${pageInfo.total}]] 条记录
			</div>
			<span class="page-btn active" th:if="${pageInfo.hasPreviousPage}">
						<a th:href="'/note/NoteUi?pageNum=1'">首页</a>
					</span>
			<span class="page-bth" th:if="${pageInfo.hasPreviousPage}">
						<a th:href="'/note/NoteUi?pageNum='+${pageInfo.prePage}"><</a>
					</span>
			<span class="page-bth" th:each="nav:${pageInfo.navigatepageNums}" th:if="${nav != pageInfo.pageNum}">
						<a th:href="'/note/NoteUi?pageNum='+${nav}" th:text="${nav}" ></a>
					</span>
			<span class="page-bth" th:if="${pageInfo.hasNextPage}">
						<a th:href="'/note/NoteUi?pageNum='+${pageInfo.nextPage}">></a>
					</span>
			<span class="page-bth">
						<a th:href="'/note/NoteUi?pageNum='+${pageInfo.pages}">尾页</a>
				</span>
		</div>
	</div>
</div>

</body>

</html>
